<template>
  <div class="home-page">
    <div class="video" id="video" v-if="videoFlag">
      <video-player  class="video-player vjs-custom-skin" :class="foldFlag ? 'showFold' : ''"
        ref="videoPlayer" 
        :playsinline="true" 
        :options="playerOptions"
        @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)"
      >
      </video-player>
      <video-desc ref="videoDesc" @play="run"></video-desc>
      <div class="video-input-suffix">

        <!-- input4 未定义报错了 v-model="input4"  TODO -->
          <el-input type="text" v-model="searchInput"
            placeholder="" @input="change($event)">
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
      </div>
      <span class="toggle el-icon-arrow-down pointer" @click="toggle"></span>
      <span class="home-detail el-icon-s-fold pointer" @click="fold"></span>
      <transition name="carHistory">
        <div class="fold" id="fold" v-show="foldFlag">
          <span class="el-icon-close" @click="close"></span>
          <div class="route" id="route">
            <div>
              <span class="first">关于我们</span><span>About us</span>
            </div>
            <div>
              <span class="first">联系方式</span><span>Contact us</span>
            </div>
            <div>
              <span class="first">招贤纳士</span><span>Recruit</span>
            </div>
            <div class="shaobing" id="shaobing">
              <span class="fold-img"></span>
            </div>
            <div>
              <span class="first">颜值优礼</span><span>精选礼品商城</span>
            </div>
            <div>
              <span class="font-info">颜值优礼是我们团队自主创立的创意礼品商城。其中包含我们团队原创定制的创意礼品和精选创意好物，直接从厂家订货，价格优惠。</span>
            </div>
          </div>
          <div class="aboutUs"></div>
        </div>
      </transition>
    </div>
    <home />
  </div>
</template>

<script>
import home from '@/components/home'
import videoDesc from '@/components/video'

export default {
  name: 'Home',
  components: {
    home,
    videoDesc
  },
  methods: {
    toggle() {
      this.videoFlag = !this.videoFlag
    },
    fold() {
      this.foldFlag = true
    },
    close() {
      this.foldFlag = false
    },
    run() {
      const player = this.$refs.videoPlayer.player
      player.play()
    },
    onPlayerPlay() {
      const vm = this
      vm.$refs.videoDesc.play()
    },
    onPlayerPause() {
      const vm = this
      vm.$refs.videoDesc.pause()
    },
    change(e){
      this.searchInput = e;
    }
  },
  data() {
    return {
      searchInput:'',
      foldFlag: false,
      videoFlag: true,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm" //url地址
        }],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按钮
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.home-page {
  .video {
    position: relative;
    .showFold {
      width: 100%;
    }
    .el-icon-arrow-down {
      color: #fff;
      position: fixed;
      bottom: 5%;
      font-size: .35rem;
    }
    
    .home-detail {
      color: #fff;
      position: absolute;
      font-size: .34rem;
      right: 0.59rem;
      top: 0.67rem;
    }

    .fold {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 30%;
      background: #fff;
      box-shadow: 0 8px 10px -5px rgba(0,0,0,.2), 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12);
      .el-icon-close {
        position: absolute;
        color: #e72119;
        top: .4rem;
        right: .3rem;
        font-size: .3rem;
      }
      .route {
        .first {
          border-right: .02rem #262626 solid;
          margin-right: .2rem;
          padding-right: .2rem;
        }
        div {
          margin: .2rem;
          margin-left: .4rem;
        }
        // span {
        //   font-size: .15rem;
        // }
        font-size: .15rem;
      }
      .font-info {
        color: #706b6a;
        font-size: .1rem;
      }
      #shaobing {
        margin: .5rem 0 .5rem .4rem;
      }
    }
  }
}
.toggle {
    left: 0;
    right: 0;
    font-size: .3rem;
    width: .3rem;
    height: .3rem;
    margin: 0 auto;
}
.video-js .vjs-icon-placeholder {
    width: 100%;
    height: 100%;
    display: block;
}

@media screen and (min-width:1200px){
  #fold {
    width: 25%;
  }
  #route {
    margin-top: 1.5rem;
  }
  #shaobing {
    margin-top: 1.5rem !important;
  }
}
@media screen and (min-width: 960px) and (max-width: 1199px) {
  #fold {
    width: 40%;
  }
  #route {
    margin-top: 1.3rem;
  }
  #shaobing {
    margin-top: 1.3rem;
  }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  #fold {
    // padding-top: .3rem;
    width: 50%;
  }
  #route {
    margin-top: .3rem;
  }
}
@media screen and (max-width: 768px) {
  #fold {
    width: 100%;
    // padding-top: .2rem;
  }
  #route {
    margin-top: .2rem;
  }

  .video-input-suffix {
    top: 0.27rem !important;
    left: 0.27rem !important; 
  }

  .home-detail {
    top: 0.27rem !important;
    right: 0.27rem !important; 
  }
}

.el-icon-arrow-down {
  animation: el-icon-arrow-down 1s infinite;
  animation-fill-mode: both;
}

@keyframes el-icon-arrow-down {
  from
  {
      bottom: 0%;
      opacity: 0;
  }
  to
  {
      bottom: 5%;
      opacity: 1;
  }
}

// 动画效果
.carHistory-enter {
  animation: carHistory-dialog-fade-in 0.3s ease;
}
.carHistory-leave {
  animation: carHistory-dialog-fade-out 0.3s;
}
.carHistory-enter-active {
  animation: carHistory-dialog-fade-in 0.3s ease;
}
.carHistory-leave-active {
  animation: carHistory-dialog-fade-out 0.3s;
}

@keyframes carHistory-dialog-fade-in {
  0% {
    transform: translate(100%);
    opacity: 1;
  }
  100% {
    transform: translate(0);
    opacity: 1;
  }
}
@keyframes carHistory-dialog-fade-out {
  0% {
    transform: translate(0);
    opacity: 1;
  }
  100% {
    transform: translate(100%);
    opacity: 1;
  }
}
.video-input-suffix {
    font-size: .1rem;
    position: absolute;
    top: .67rem;
    left: .75rem;
}


</style>
<style scoped>
#video >>> .vjs-big-play-button {
    display: none;
}

.video-input-suffix >>> .el-input{
    width: 100%;
}

.video-input-suffix >>> input {
    border-radius: 0.5rem;
    height: .35rem;
    line-height: .25rem;
    background-color: transparent;
    border-color: #968f8f;
    color:white;
}
.video-input-suffix >>> .el-input__icon {
    line-height: .25rem;
    color:#fff;
}

@media screen and (max-width: 540px) {
  .video-input-suffix >>> .el-input__inner {
    width: 50%;
  }
  .video-input-suffix >>> .el-input__suffix {
    right: 50%;
  }
}
</style>